<template>
	<div style="display: flex;flex-direction: column;" class="otherPage centreOfExcellence recruitmentInformation">
		<Header :selected="8"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover; ':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="3" :bgColor="bgColor">
		</Navigation>
		<div class="content" style="min-height: 600px;">
			<div class="content_bg" style="min-height: 600px;">
				<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"
					background-color="#F3F3F3" text-color="#666666" active-text-color="#0082F0">
					<template v-for="item in arrA">
						<el-menu-item @click="changeClass(item.index)" :index="item.index">{{item.name}}</el-menu-item>
					</template>
				</el-menu>
				<el-row :gutter="60" class="tac">
					<el-col :xs="24" :sm="6" :md="6" :lg="6">
						<el-menu :default-active="jobClassActiveIndex" class="el-menu-vertical-demo">
							<template v-for="(item,index) in jobClassifyList">
								<el-menu-item @click="clickCalss(item.classifyId)" :index="index.toString()">
									<div
										:style="'width: 100%; padding: 0px 5%;height: 100%;'+(index<arrA.length?'border-bottom: 1px solid #F2F2F3;':'')">
										<span slot="title">{{item.classifyName}}</span>

									</div>
								</el-menu-item>
							</template>
							<el-menu-item @click="isRegistrationForm=true" :index="$t('entry')">{{$t('entry')}}
							</el-menu-item>
						</el-menu>
					</el-col>
					<el-col v-if="!isRegistrationForm" :xs="24" :sm="18" :md="18" :lg="18">
						<el-collapse v-model="activeNames">
							<template v-for="(item ,index) in recruitPublishList">
								<el-collapse-item class="gwheader" :title="item.jobName" :name="index">
									<div class="xzfw">{{$t('salaryRange')}} ：{{item.salaryRange}}</div>
									<div class="gwcontent" v-html="item.content"></div>


									<div class="gwzpjz">
										<el-link @click="goToInfo(item.id)" type="primary">{{$t('moreDetails')}} <i
												class="el-icon-d-arrow-right"></i></el-link>
									</div>
								</el-collapse-item>
							</template>
							<div>
								<el-row :gutter="24" type="flex" class="paginationArea">
									<el-pagination background :current-page.sync="currentPage" :page-size="pageSize"
										:layout="isShowJumper?'prev, pager, next,total,jumper ':'prev, next,total' "
										:total="total" :prev-text="$t('previousPage')" :next-text="$t('nextPage')"
										@current-change="handleCurrentChange" />
								</el-row>
							</div>
						</el-collapse>
					</el-col>
					<el-col v-else :xs="24" :sm="18" :md="18" :lg="18">
						<div class="box-card-registration">{{$t('onlineResumeFilling')}}</div>
						<!-- 			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto"
							class="demo-ruleForm"> -->
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('positionApplied')" prop="jobName">
										<el-select @change="handlejobNameChange" size="small" class="w-100"
											v-model="ruleForm.jobName" :placeholder="$t('appliedPositionTip')">
											<el-option :label="item.jobName" v-for="item in onlinejobList"
												:value="item.jobName"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
								</el-col>
								<el-col :span="1">
								</el-col>
							</el-row>

							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="22" :lg="22">
									<el-divider></el-divider>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :span="20" class="info-title personalIcon">
									{{$t('PersonalInformation')}}
								</el-col>
								<el-col :xs="24" :sm="24" :md="2" :lg="2">
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('name')" prop="name">
										<el-input size="small" :placeholder="$t('placeholderName')"
											v-model="ruleForm.name"></el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('iDNo')" prop="idCard">
										<el-input size="small" :placeholder="$t('enterIdNoTip')"
											v-model="ruleForm.idCard">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="1">
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('gender')" prop="gender">
										<el-radio-group size="small" v-model="ruleForm.gender">
											<el-radio label="1">{{$t('male')}}</el-radio>
											<el-radio label="2">{{$t('female')}}</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('age')" prop="age">
										<el-input size="small" :placeholder="$t('ageTip')" v-model="ruleForm.age">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="1">
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('graduationInstitution')" prop="school">
										<el-input size="small" :placeholder="$t('graduationInstitutionTip')"
											v-model="ruleForm.school">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('ProfessionalDisciplines')" prop="speciality">
										<el-input size="small" :placeholder="$t('professionalDisciplinesTip')"
											v-model="ruleForm.speciality">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="1">
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('highestEducation')" prop="education">
										<el-input size="small" :placeholder="$t('highestEducationTip')"
											v-model="ruleForm.education">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('graduationDate')" prop="graduationTime">
										<el-date-picker class="w-100" v-model="ruleForm.graduationTime"
											value-format="yyyy-MM-dd" type="date"
											:placeholder="$t('graduationDateTip')">
										</el-date-picker>
									</el-form-item>
								</el-col>
								<el-col :span="1">
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('politicalOutlook')" prop="politics">
										<el-select size="small" class="w-100" v-model="ruleForm.politics"
											:placeholder="$t('politicalOutlookTip')">
											<el-option :label="$t('partyMember')" :value="$t('partyMember')">
											</el-option>
											<el-option :label="$t('placeholderPartyMember')"
												:value="$t('placeholderPartyMember')"></el-option>
											<el-option :label="$t('theMasses')" :value="$t('theMasses')"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('militaryOrNot')" prop="isArmy">
										<el-select size="small" class="w-100" v-model="ruleForm.isArmy"
											:placeholder="$t('placeholderTip')">
											<el-option :label="$t('yes')" value="0"></el-option>
											<el-option :label="$t('no')" value="1"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="1">
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('maritalStatus')" prop="isMarriage">
										<el-select size="small" class="w-100" v-model="ruleForm.isMarriage"
											:placeholder="$t('maritalStatusTip')">
											<el-option :label="$t('unknown')" value="0"></el-option>
											<el-option :label="$t('married')" value="1"></el-option>
											<el-option :label="$t('unmarried')" value="2"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('registeredResidence')" prop="domicile">
										<el-input size="small" :placeholder="$t('placeholderRegisteredResidence')"
											v-model="ruleForm.domicile">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="1">
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
									<el-form-item :label="$t('telephone')" prop="mobile">
										<el-input size="small" :placeholder="$t('placeholderMobile')"
											v-model="ruleForm.mobile"></el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="11" :lg="11">
								</el-col>
								<el-col :span="1">
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="22" :lg="22">
									<el-divider></el-divider>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="22" class="info-title workInfo">
									<i class="requiedStar">*</i>
									{{$t('workExperience')}}
									<el-button size="small" class="addrow" type="primary" @click="addRow()">
										{{$t('addNewColumn')}}
									</el-button>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="22" :lg="22">
									<el-table border :data="ruleForm.workExperienceList" style="width: 100%;"
										id="workExperienceList">
										<el-table-column :label="$t('corporateName')">
											<template #default="{ row }">
												<el-input size="small" :placeholder="$t('placeholderPlaceholder')"
													v-model="row.companyName">
												</el-input>
											</template>
										</el-table-column>
										<el-table-column :label="$t('position')">
											<template #default="{ row }">
												<el-input size="small" :placeholder="$t('placeholderPosition')"
													v-model="row.position">
												</el-input>

											</template>
										</el-table-column>
										<el-table-column :label="$t('workingDate')" width="318">
											<template #default="{ row }">
												<el-date-picker v-model="row.startTime" value-format="yyyy-MM-dd"
													type="date" :placeholder="$t('placeholderWorkingStartDate')"
													style="width: 50%;">
												</el-date-picker>
												<el-date-picker v-model="row.endTime" value-format="yyyy-MM-dd"
													type="date" :placeholder="$t('placeholderWorkingEndDate')"
													style="width: 50%;">
												</el-date-picker>
											</template>
										</el-table-column>
										<el-table-column :label="$t('operate')" width="80">
											<template #default="{ row }">
												<el-button size="mini" type="danger"
													@click.native.prevent="deleteRow(ruleForm.workExperienceList.indexOf(row), ruleForm.workExperienceList)">
													{{$t('remove')}} </el-button>
											</template>
										</el-table-column>
									</el-table>
								</el-col>
								<el-col :span="1">
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="22" :lg="22">
									<el-divider></el-divider>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="12" class="info-title education">
									<i class="requiedStar">*</i>
									{{$t('educationAndDegree')}}
								</el-col>
								<el-col :xs="24" :sm="24" :md="2" :lg="2">
								</el-col>
							</el-row>
							<el-row>
								<el-col :xs="24" :sm="24" :md="12" :lg="12">
									<el-form-item label-width="0px" label="" prop="xlFileName">
										<el-upload v-if="!ruleForm.xlFileUrl" drag :limit='1'
											:before-upload="beforeUpload" :on-remove='xlFileNameRemove'
											:on-success='xlFileNameSuccess' :on-error='fileError'
											:action="$request.getBaseApi()+'/upload/uploadFile'" multiple>
											<i class="el-icon-upload"></i>
											<div class="el-upload__text">{{$t('uploadEducationalCertificate')}}</div>
										</el-upload>
										<div v-if="ruleForm.xlFileUrl">
											<img class="thumbnail" @click="handlePictureCardPreview(ruleForm.xlFileUrl)"
												:src="ruleForm.xlFileUrl" alt="">
											<span @click="xlFileNameRemove()">
												<i class="el-icon-delete"></i>
											</span>
										</div>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="12" :lg="12">
									<el-form-item label="" label-width="0px" prop="xwFileName">
										<el-upload v-if="!ruleForm.xwFileUrl" class="upload-demo" drag :limit='1'
											:before-upload="beforeUpload" :on-remove='xwFileNameRemove'
											:on-success='xwFileNameSuccess' :on-error='fileError'
											:action="$request.getBaseApi()+'/upload/uploadFile'" multiple>
											<i class="el-icon-upload"></i>
											<div class="el-upload__text">{{$t('uploadDegreeCertificate')}}</div>
											<!-- 	<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
										</el-upload>
										<div v-if="ruleForm.xwFileUrl">
											<img class="thumbnail" @click="handlePictureCardPreview(ruleForm.xwFileUrl)"
												:src="ruleForm.xwFileUrl" alt="">
											<span @click="xwFileNameRemove()">
												<i class="el-icon-delete"></i>
											</span>
										</div>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="1">
								</el-col>
								<el-col :xs="24" :sm="24" :md="22" :lg="22">
									&nbsp;
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24" class="info-title IDCard">
									<i class="requiedStar">*</i>
									{{$t('uploadIDCard')}}
								</el-col>
							</el-row>
							<el-row>
								<el-col :xs="24" :sm="24" :md="12" :lg="12">
									<el-form-item label-width="0px" label="" prop="sfzFrontFileName">
										<el-upload :list-type="picture" v-if="!ruleForm.sfzFrontFileUrl"
											label-width="0px" class="upload-demo" drag :limit='1'
											:before-upload="beforeUpload" :on-remove='sfzFrontFileNameRemove'
											:on-success='sfzFrontFileNameSuccess' :on-error='fileError'
											:action="$request.getBaseApi()+'/upload/uploadFile'" multiple>
											<i class="el-icon-upload"></i>
											<div class="el-upload__text">{{$t('placeholderIDCardFornt')}}</em></div>
										</el-upload>

										<div v-if="ruleForm.sfzFrontFileUrl">
											<img class="thumbnail"
												@click="handlePictureCardPreview(ruleForm.sfzFrontFileUrl)"
												:src="ruleForm.sfzFrontFileUrl" alt="">
											<span @click="sfzFrontFileNameRemove()">
												<i class="el-icon-delete"></i>
											</span>
										</div>
									</el-form-item>
								</el-col>

								<el-col :xs="24" :sm="24" :md="12" :lg="12">
									<el-form-item label-width="0px" label="" prop="sfzBackFileName">
										<el-upload v-if="!ruleForm.sfzBackFileUrl" class="upload-demo" drag :limit='1'
											:on-remove='sfzBackFileNameRemove' :on-success='sfzBackFileNameSuccess'
											:before-upload="beforeUpload" :on-error='fileError'
											:action="$request.getBaseApi()+'/upload/uploadFile'" multiple>
											<i class="el-icon-upload"></i>
											<div class="el-upload__text">{{$t('placeholderIDCardFreverse')}}</div>
										</el-upload>
										<div v-if="ruleForm.sfzBackFileUrl">
											<img class="thumbnail"
												@click="handlePictureCardPreview(ruleForm.sfzBackFileUrl)"
												:src="ruleForm.sfzBackFileUrl" alt="">
											<span @click="sfzBackFileNameRemove()">
												<i class="el-icon-delete"></i>
											</span>
										</div>
									</el-form-item>
								</el-col>
							</el-row>
							<div style="width: 180px;margin: 0 auto;margin-top: 20px;">
								<el-button type="primary" @click="submitForm('ruleForm')">{{$t('submitNow')}}
								</el-button>
								<el-button @click="resetForm('ruleForm')">{{$t('resetting')}}</el-button>
							</div>
						</el-form>
					</el-col>
				</el-row>
			</div>
		</div>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import Pagination from '../../../src/components/common/Pagination.vue'
	import {
		centreOfExcellenceMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination
		},
		data() {
			return {
				isShowJumper: true,
				fileType: "picture",
				dialogVisible: false,
				dialogImageUrl: false,
				loading: true,
				onlinejobList: [],
				ruleForm: {
					jobId: "", //岗位id
					jobName: "", //岗位名称
					name: "", //姓名
					idCard: "", //身份证号
					gender: "", //性别(1男2女)
					age: '', //年龄
					school: "", //毕业院校
					speciality: "", //专业学科
					education: "", //全日制最高学历
					graduationTime: "", //毕业时间
					politics: "", //政治面貌
					isArmy: "", //是否服兵役(0否1是)
					isMarriage: "", //婚姻情况(0未知1已婚2未婚)
					domicile: "", //户籍所在地
					mobile: "", //电话
					xlFileName: "",
					xlFileUrl: "",
					xwFileName: "",
					xwFileUrl: "",
					sfzFrontFileName: "",
					sfzFrontFileUrl: "",
					sfzBackFileName: "",
					sfzBackFileUrl: "",
					workExperienceList: [{
						companyName: "", //公司名称
						position: "", //职位 
						startTime: "", //开始时间
						endTime: "" //结束时间
					}]
				},
				rules: {
					name: [{
							required: true,
							message: this.$t('placeholderName'),
							trigger: 'blur'
						},
						{
							min: 2,
							max: 15,
							message: this.$t('between1To15Tip'),
							trigger: 'blur'
						}
					],
					jobName: [{
						required: true,
						message: this.$t('selectPositionTip'),
						trigger: 'change'
					}],
					idCard: [{

						required: true,
						message: this.$t('enterIdNoTip'),
						trigger: 'blur'
					}],
					gender: [{
						required: true,
						message: this.$t('genderTip'),
						trigger: 'change'
					}],
					age: [{

						required: true,
						message: this.$t('ageTip'),
						trigger: 'blur'
					}],
					school: [{
						required: true,
						message: this.$t('graduationInstitutionTip'),
						trigger: 'blur'
					}],
					speciality: [{
						required: true,
						message: this.$t('professionalDisciplinesTip'),
						trigger: 'blur'
					}],
					education: [{
						required: true,
						message: this.$t('highestEducationTip'),
						trigger: 'blur'
					}],
					graduationTime: [{
						required: true,
						message: this.$t('graduationDateTip'),
						trigger: 'blur'
					}],
					politics: [{
						required: true,
						message: this.$t('politicalOutlookTip'),
						trigger: 'change'
					}],
					isArmy: [{
						required: true,
						message: this.$t('placeholderTip'),
						trigger: 'change'
					}],
					isMarriage: [{
						required: true,
						message: this.$t('maritalStatusTip'),
						trigger: 'change'
					}],
					domicile: [{
						required: true,
						message: this.$t('placeholderRegisteredResidence'),
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						message: this.$t('placeholderMobile'),
						trigger: 'blur'
					}],
					date: [{
						type: 'array',
						required: true,
						message: this.$t('placeholderWorkingStartDate'),
						trigger: 'blur'
					}],
					xlFileName: [{
						required: true,
						message: this.$t('educationErrorTip'),
						trigger: 'change'
					}],
					xwFileName: [{
						required: true,
						message: this.$t('degreeErrorTip'),
						trigger: 'change'
					}],
					sfzFrontFileName: [{
						required: true,
						message: this.$t('reverseErrorTip'),
						trigger: 'change'
					}],
					sfzBackFileName: [{
						required: true,
						message: this.$t('reverseErrorTip'),
						trigger: 'change'
					}]
				},
				tableData: [{
					date: '',
					name: '',
					address: ''
				}],
				isRegistrationForm: false,
				pageSize: 5,
				total: 0,
				currentPage: 1,
				activeIndex: '1',
				activeNames: [0],
				arrA: [{
					name: this.$t('socialRecruitment'),
					index: "1"
				}, {
					name: this.$t('campusRecruitment'),
					index: "2"
				}],
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: centreOfExcellenceMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('centreOfExcellence'),
						to: '/centreOfExcellence'
					},
					{
						label: this.$t('recruitmentInformation'),
						to: '/recruitmentInformation'
					}
				],
				hoverIndex: -1,
				jobClass: "1",
				jobClassifyList: [],
				recruitPublishList: [],
				jobClassActiveIndex: '0',
				classifyId: ''
			};
		},
		computed: {},
		watch: {
			'$route'(to, from) {
				// 获取最新的查询参数
				const query = this.$route.query;
				if (query != null) {
					this.activeIndex = query.menuActiveIndex + 1;
				}
			}
		},
		onload() {},
		created() {},
		mounted() {
			if (this.$route.query.menuActiveIndex != null) {
				this.activeIndex = this.$route.query.menuActiveIndex + 1;
			}
			this.bindBg();
			this.initPage();
			this.bindJobList();
			this.bindJobClassifyList().then(res => {
				if (this.jobClassifyList.length > 0) {
					this.bindRecruitPublishList(this.jobClassifyList[0].classifyId);
					//console.log('this.jobClassifyList[0].classifyId',this.jobClassifyList[0].classifyId)
					//this.jobClassActiveIndex = this.jobClassifyList[0].classifyId;
					//console.log('this.jobClassifyList[0].classifyId', this.jobClassifyList[0].classifyId)
				}
			});
			if (this.$request.checkIsMobile()) {
				this.isShowJumper = false;
			}
		},
		methods: {
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			beforeUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				if (!isJPG) {
					this.$notify({
						message: this.$t('uploadErrorTip'),
						position: 'bottom-right',
						type: 'warning'
					});

				}

				return isJPG;
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file;
				this.dialogVisible = true;
			},
			/**
			 * (1)	获取招聘信息顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.zpXxBgImage(params).then(res => {
					this.bgImg = res.data.fileUrl
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});

			},
			xlFileNameRemove() {
				this.ruleForm.xlFileName = null;
				this.ruleForm.xlFileUrl = null;
			},
			xwFileNameRemove() {
				this.ruleForm.xwFileName = null;
				this.ruleForm.xwFileUrl = null;
			},
			sfzFrontFileNameRemove() {
				this.ruleForm.sfzFrontFileName = null;
				this.ruleForm.sfzFrontFileUrl = null;
			},
			sfzBackFileNameRemove() {
				this.ruleForm.sfzBackFileName = null;
				this.ruleForm.sfzBackFileUrl = null;
			},
			//学历证书文件-上传成功
			xlFileNameSuccess(e) {
				console.log('eeeeeeee', e)
				this.ruleForm.xlFileName = e.data.fileName;
				this.ruleForm.xlFileUrl = e.data.fileUrl;
				console.log('this.ruleForm.xlFileName', this.ruleForm.xlFileName);
			},
			/**
			 * 学位-正面-上传成功
			 * @param {Object} e
			 */
			xwFileNameSuccess(e) {
				console.log(e);
				this.ruleForm.xwFileName = e.data.fileName;
				this.ruleForm.xwFileUrl = e.data.fileUrl;
			},
			/**
			 * 身份证-正面-上传成功
			 * @param {Object} e
			 */
			sfzFrontFileNameSuccess(e) {
				console.log(e);
				this.ruleForm.sfzFrontFileName = e.data.fileName;
				this.ruleForm.sfzFrontFileUrl = e.data.fileUrl;
			},
			/**
			 * 身份证-反面-上传成功
			 * @param {Object} e
			 */
			sfzBackFileNameSuccess(e) {
				console.log(e);
				this.ruleForm.sfzBackFileName = e.data.fileName;
				this.ruleForm.sfzBackFileUrl = e.data.fileUrl;
			},
			fileError() {

				this.$notify({
					message: this.$t('upErrorTip'),
					position: 'bottom-right',
					type: 'warning'
				});
			},
			bindJobList() {
				return new Promise((resolve, reject) => {
					// 请求表格数据
					let params = {};
					let that = this;
					this.$request.jobList(params).then(res => {
						if (res && res.data) {
							this.onlinejobList = res.data
						}
						resolve();
					}).catch((error) => {
						console.log(error)
					})
				})
			},
			changeClass(index) {
				this.jobClass = index;
				this.bindJobClassifyList().then(i => {
					this.bindRecruitPublishList(this.jobClassifyList[0].classifyId, true)
				});
			},
			clickCalss(id) {
				this.isRegistrationForm = false;
				this.changeRecruitPublishList(id);
			},
			changeRecruitPublishList(classifyId) {
				this.bindRecruitPublishList(classifyId, true)
			},
			bindRecruitPublishList(classifyId, isClick) {
				if (isClick) {
					this.currentPage = 1;
				}
				this.classifyId = classifyId;
				let params = {
					types: this.jobClass,
					classifyId: classifyId,
					pageNum: this.currentPage, //int 类型
					pageSize: this.pageSize //int 类型
				};
				let that = this;
				this.$request.recruitPublishList(params).then(res => {
					if (res && res.data) {
						that.recruitPublishList = res.data.records;
						that.total = res.data.total;
						that.activeNames = [];
						for (let i = 0; i < that.recruitPublishList.length; i++) {
							that.activeNames.push(i);
						}
					}

				}).catch((error) => {
					console.log(error)
				})
			},
			bindJobClassifyList() {
				return new Promise((resolve, reject) => {
					let params = {
						types: this.jobClass
					};
					let that = this;
					this.$request.jobClassifyList(params).then(res => {
						if (res && res.data) {
							this.jobClassifyList = res.data
						}
						resolve(res);
					}).catch((error) => {
						console.log(error)
					})
				})
			},
			addRow() {
				this.ruleForm.workExperienceList.push({})
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.ruleForm.workExperienceList && this.ruleForm.workExperienceList.length < 1) {
							this.$notify({
								message: this.$t('workErrorTip'),
								position: 'bottom-right',
								type: 'warning'
							});
							return;
						}
						for (let i = 0; i < this.ruleForm.workExperienceList.length; i++) {
							if (!this.ruleForm.workExperienceList[i].companyName) {
								this.$notify({
									message: this.$t('workErrorNoTip') + (i + 1) + this.$t(
										'companyNameErrorTip'),
									position: 'bottom-right',
									type: 'warning'
								});
								return;
							}
							if (!this.ruleForm.workExperienceList[i].position) {

								this.$notify({
									message: this.$t('workErrorNoTip') + (i + 1) + this.$t(
										'postionErrorTip'),
									position: 'bottom-right',
									type: 'warning'
								});

								return;
							}
							if (!this.ruleForm.workExperienceList[i].startTime) {
								this.$notify({
									message: this.$t('workErrorNoTip') + (i + 1) + this.$t(
										'startDateErrorTip'),
									position: 'bottom-right',
									type: 'warning'
								});

								return;
							}
							if (!this.ruleForm.workExperienceList[i].endTime) {
								this.$notify({
									message: this.$t('workErrorNoTip') + (i + 1) + this.$t(
										'endDateErrorTip'),
									position: 'bottom-right',
									type: 'warning'
								});

								return;
							}
						}
						if (!this.ruleForm.xlFileName && !this.ruleForm.xlFileUrl) {
							this.$notify({
								message: this.$t('educationErrorTip'),
								position: 'bottom-right',
								type: 'warning'
							});
							console.log('this.ruleForm.xlFileName=' + this.ruleForm.xlFileName)
							return;
						}
						if (!this.ruleForm.xwFileName && !this.ruleForm.xwFileUrl) {
							this.$notify({
								message: this.$t('degreeErrorTip'),
								position: 'bottom-right',
								type: 'warning'
							});
							return;
						}
						if (!this.ruleForm.sfzFrontFileName && !this.ruleForm.sfzFrontFileUrl) {
							this.$notify({
								message: this.$t('frontErrorTip'),
								position: 'bottom-right',
								type: 'warning'
							});
							return;
						}
						if (!this.ruleForm.sfzBackFileName && !this.ruleForm.sfzBackFileUrl) {
							this.$notify({
								message: this.$t('reverseErrorTip'),
								position: 'bottom-right',
								type: 'warning'
							});
							return;
						}

						let params = this.ruleForm;
						console.log("params", params);
						this.save(params).then(data => {
							if (data.code != 1000) {
								this.$notify({
									message: data.message,
									position: 'bottom-right',
									type: 'warning'
								});
								return;
							}
							this.$notify({
								message: this.$t('successfullyTip'),
								position: 'bottom-right',
								type: 'success'
							});

						});
					} else {
						this.$nextTick(() => {
							this.setFileError()
						});
						console.log('error submit!!');
						return false;
					}
				});
			},
			handlejobNameChange(name) {
				let selectItem = this.onlinejobList.filter(i => i.jobName === name);
				if (selectItem) {
					this.ruleForm.jobId = selectItem[0].id;
				}
				console.log('this.ruleForm.jobId ', this.ruleForm.jobId)
			},
			save(data) {
				this.loading = true;
				return new Promise((resolve, reject) => {
					// 请求表格数据
					let params = data;
					let that = this;
					this.$request.onlineJob(params).then(res => {
						this.loading = false;
						resolve(res);
					}).catch((error) => {
						console.log(error)
					})
				})
			},
			resetForm(formName) {
				//this.getCode()
				this.$refs[formName].resetFields();

				this.ruleForm.workExperienceList = [{
					companyName: "", //公司名称
					position: "", //职位 
					startTime: "", //开始时间
					endTime: "" //结束时间
				}];
				this.xlFileNameRemove();
				this.xwFileNameRemove();
				this.sfzFrontFileNameRemove();
				this.sfzBackFileNameRemove();
			},
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			///////获取点击页码，请求接口
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				this.bindRecruitPublishList(this.classifyId);
			},
			initPage() {

			},
			goToInfo(id) {
				console.log(this.activeIndex,"activeIndex")
				console.log(this.classifyId ,'this.classifyId ')
				this.$router.push({
					name: this.$t('recruitmentInformationInfo'),
					query: {
						id: id,
						types:this.activeIndex,
						classifyId:this.classifyId
					}
				});
			},
			setFileError() {
				// 表单验证未通过，滚动到未通过验证的第一个元素
				const firstError = document.querySelector('.is-error');
				if (firstError) {
					firstError.scrollIntoView({
						behavior: 'smooth',
						block: 'start'
					});
				}
			}
		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/centreOfExcellence/centreOfExcellence.css");

	.corporateOverview img {}

	.box-card-registration {
		margin-top: 3vh;
		margin-bottom: 3vh;
		text-align: center;
		height: 50px;
		line-height: 50px;
		background: #F3F3F3;
	}

	.box-card {
		margin-top: 3vh;
	}

	.el-menu-vertical-demo {
		margin-top: 3vh;
		box-shadow: 0px 2px 7px 0px rgba(122, 122, 122, 0.25);
		text-align: center;

	}

	.el-menu-vertical-demo .is-active {
		border-left: 3px solid #0484D7;
	}

	.box-card .el-collapse {
		border: 0px !important;

	}

	.el-collapse-item {
		padding: 20px !important;
	}

	.box-card .el-collapse-item {
		margin: 2vh !important;
	}

	.box-card .is-active {
		box-shadow: 0px 2px 7px 0px rgba(122, 122, 122, 0.25);
	}

	.w-100 {
		width: 100%;
	}

	.info-title {
		font-weight: 400;
		font-size: 16px;
		padding-left: 22px;
		height: 20px;
		line-height: 15px;
		margin-bottom: 15px;
	}

	.info-title.personalIcon {
		background: url("../../assets/icons/icon_personal.png") no-repeat;
		background-size: 18px;
	}

	.info-title.workInfo {
		background: url("../../assets/icons/icon_workInfo.png") no-repeat;
		background-size: 16px;
		position: relative;
		margin-left: 10px;
	}

	.info-title.education {
		background: url("../../assets/icons/icon_education.png") no-repeat;
		background-size: 17px;
		position: relative;
		margin-left: 10px;
	}


	.info-title.IDCard {
		background: url("../../assets/icons/icon_IDCard.png") no-repeat;
		background-size: 16px;
		position: relative;
		margin-left: 10px;
	}

	.requiedStar {
		color: #F56C6C;
		margin-right: 4px;
		position: absolute;
		left: -15px;
		top: 5px;
	}

	.addrow {
		float: right;
		margin-bottom: 5px;
	}

	.xzfw {
		padding-top: 5px;
		border-bottom: 2px solid #F6F6F6;
		height: 40px;
	}

	.gwcontent {
		padding-top: 10px;
		max-height: 439px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 10px;
	}

	.gwheader {
		margin-top: 3vh;
		box-shadow: 0px 2px 7px 0px rgba(122, 122, 122, 0.25);
	}

	.gwzpjz {
		text-align: right;
	}

	.thumbnail {
		width: 360px;
		height: 180px;

	}

	.thumbnail:hover {
		cursor: pointer;
		opacity: 0.8;

	}

	.el-icon-delete {
		cursor: pointer;
	}

	.recruitmentInformation .paginationArea {
		margin: 20px 0px;
	}

	.recruitmentInformation .el-pagination {
		margin: 0 auto;
	}

	::v-deep .el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.companyCultureImgArea {
			width: 60%;
		}

		.companyCultureContent {}

	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}
	}

	@media (max-width: 1024px) {}

	@media (max-width: 900px) {}
</style>